<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>
        Scene Layer with point geometries | Sample | ArcGIS API for JavaScript
        4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .floor, .door {
            width: 100px;
            text-align: center;
            border: #4c4c4c 1px solid;
            margin: 1px 1px;
            background-color: #80efc5;
        }
    </style>
    <link href="https://js.arcgis.com/4.18/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.18/"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="esri-widget">
</div>

<div class="esri-widget" id="esri-widget2">
</div>

<div class="esri-widget" id="esri-widget3">
    <div id="start">开始</div>
</div>
<script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/SceneLayer",
        "esri/layers/FeatureLayer",
        "esri/tasks/support/Query",
        "esri/layers/WebTileLayer",
        "esri/layers/BuildingSceneLayer"
    ], function (Map, SceneView, SceneLayer, FeatureLayer, Query, WebTileLayer, BuildingSceneLayer) {
        let sceneLayer1 = new SceneLayer({
            url: "https://tjscim.arcgisonline.cn/server/rest/services/Hosted/%E6%A5%BC%E5%B1%82%E6%9D%BF/SceneServer?f=json",
            outFields: ["*"],   // 必填
            spatialReference: {
                wkid: 2427
            }
        });
        let sceneLayer2 = new SceneLayer({
            url: "https://tjscim.arcgisonline.cn/server/rest/services/Hosted/%E5%88%86%E5%B1%82%E5%88%86%E6%88%B7%E5%BB%BA%E7%AD%91%E7%99%BD%E6%A8%A1/SceneServer?f=json",
            outFields: ["*"],   // 必填
            spatialReference: {
                wkid: 2427
            }
        });
        let sceneLayer3 = new SceneLayer({
            url: "https://tjscim.arcgisonline.cn/server/rest/services/Hosted/%E6%A5%BC%E5%B1%82%E5%A2%99/SceneServer?f=json",
            outFields: ["*"],   // 必填
            spatialReference: {
                wkid: 2427
            }
        });


        let map = new Map({//
            basemap: 'streets',
            layers: [sceneLayer1, sceneLayer3, sceneLayer2],
            ground: {
                opacity: 0.6,//地图背景的透明度
                surfaceColor: "black",//地表的颜色
                navigationConstraint: { //导航约束
                    type: "stay-above"//只能在地上
                }
            },
        });


        let view = new SceneView({
            container: "viewDiv",
            map: map,
            environment: {
                starsEnabled: true,
                atmosphereEnabled: false,//没有大气环境
                background: {
                    type: "color",
                    color: "black"
                }
            },
            spatialReference: {//坐标系
                wkid: 2427
            }
        });


        var highlight;
        view.on("click", (event) => {
            //每次点击的时候应当把之前的高亮去除
            if (highlight) {
                highlight.remove();
            }

            //根据传入的屏幕坐标或者鼠标事件，获取地图图层在该点位下所有的展示的要素，
            view.hitTest(event).then((response) => {
                sceneLayer2.visible = false;
                //获取在给定图层的视图上创建的 LayerView
                view.whenLayerView(sceneLayer1).then((sceneLayerView) => {
                    sceneLayer2.visible = true;
                    //高亮 突出显示,返回一个高亮处理程序，其中包含一个remove()
                    highlight = sceneLayerView.highlight(response.results[0].graphic);
                });
            });
        });
        view.ui.add("esri-widget", "top-right");
        view.ui.add("esri-widget2", "bottom-right");
        view.ui.add("esri-widget3", "bottom-left");

        $("#esri-widget").on("click", ".floor",function () {
            $("#esri-widget2").html('');
            view.whenLayerView(sceneLayer1).then((layerView) => {
                let query = layerView.createQuery();
                query.where = "层数 =" + this.innerText;
                query.outFields = ['户号'];
                layerView.queryFeatures(query).then((result) => {
                    result.features.forEach((item) => {
                        $("#esri-widget2").append('<div class="door">' + item.attributes.户号 + '</div>');
                    })
                });
            });

            sceneLayer1.definitionExpression = "层数 =" + this.innerText;
        });

        $("#start").click(function(){
            $("#esri-widget").html('');
            let query = sceneLayer1.createQuery();
            query.outFields = ['层数'];
            query.outStatistics = [{
                onStatisticField: "1=1",
                outStatisticFieldName: "total_businesses",
                statisticType: "count"
            }];
            query.groupByFieldsForStatistics = ["层数"];

            view.whenLayerView(sceneLayer1).then((layerView) => {
                layerView.queryFeatures(query).then((result) => {
                    result.features.forEach((item) => {
                        $("#esri-widget").append('<div class="floor">' + item.attributes.层数 + '</div>');
                    })
                });
            });
        });


        $("#esri-widget2").on("click", ".door", function () {
            sceneLayer1.definitionExpression = "户号 ='" + this.innerText + "'";
        });
    });
</script>
</body>
</html>
